<template>
  <div class="box">
    <!-- 如果我们在组件标签中书写内容 -->
    <!-- 那么就会自动替换掉 <solt> 组件中的内容 -->
    <List :age="age" :info="info">
      <!-- 默认插槽 -->
      <template>小花</template>
      <!-- 在对应组件上 使用 v-solt: 指令来绑定在 <slot> 标签上name属性对应的 属性值 -->
      <!-- 具名插槽 -->
      <template v-slot:dog> 旺财 </template>
      <!-- v-slot:in="自定义属性名" -->
      <!-- 这个自定义属性名就是绑定在 solt 标签上的所有绑定的属性 -->

      <!-- 作用域插槽 -->
      <template v-slot:in="{ age, info }">
        <div>年龄: {{ age }}</div>
        <div>信息: {{ info.name }}</div>
      </template>
    </List>
  </div>
</template>

<script type="text/ecmascript-6">
import { TabPane } from 'element-ui';
import List from './List'
export default {
    name: 'SlotTest',
    // 将数据传递给子组件
    data() {
        return {
           age: 6,
           info: {
            name: '张三'
           }
        }
    },

    components: {
    List,
    TabPane
}
}
</script>
